<!--修改房间情况 和 查看房间情况-->
<template>
<div>
  <el-dialog :title="title" :visible.sync="showFlag" width="50%" @close="closeDialog" >
    <el-form :model="editForm" ref="editForm" label-width="100px" :rules="editRule">
      <el-row>
        <el-col :span="12">
          <el-form-item label="房间编号">
            <el-input v-model="editForm.rId" placeholder="请输入房间号" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公寓编号">
            <el-input v-model="editForm.apt_id" placeholder="请输入公寓号" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电费">
            <el-input v-model="editForm.eCharge" placeholder="请输入电费" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水费">
            <el-input v-model="editForm.wCharge" placeholder="请输入水费" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="交电费时间">
            <el-date-picker v-model="editForm.eTime" style="width:100%" type="date" :disabled="disabled" placeholder="请交电费时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交水费时间">
            <el-date-picker v-model="editForm.wTime" style="width:100%" type="date" :disabled="disabled" placeholder="请交电费时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="卫生情况">
            <el-select v-model="editForm.hygiene" placeholder="请选择卫生情况" :clearable=true style="width:100%" :disabled="disabled">
              <el-option label="已打扫" value="10" ></el-option>
              <el-option label="未打扫" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer" align="center">
    <el-button type="success" @click="onSave('editForm')">确 定</el-button>
    <el-button @click="onCancel('editForm')">取 消</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "editWAndE",
  data(){
  return{
    editForm:{
      id:'',
      rId:'',
      apt_id:'',
      eCharge:'',
      wCharge:'',
      eTime:'',
      wTime:'',
      hygiene:'',
    },
    editRule:{
      r_id:[{required:true,message:'请输入房间号',trigger: 'blur'}]
    },
    showFlag:false,
    //title默认为：修改房间情况
    title:'修改房间情况',
    //表单默认可以修改
    disabled:false
  }
  },
  methods:{
    init(row){
      this.$nextTick(()=>{
        this.row=row

        this.getConditionDetail(row)
      })
      this.showFlag=true
    },
    getConditionDetail(row){
      this.editForm.id=row.id
      this.editForm.rId=row.rid
      this.editForm.apt_id=row.apt_id
      this.editForm.eCharge=row.echarge
      this.editForm.wCharge=row.wcharge
      this.editForm.eTime=row.etime
      this.editForm.wTime=row.wtime
      row.hygiene===10 ? this.editForm.hygiene='已打扫':this.editForm.hygiene='未打扫'
    },
    //保存
    onSave(){
      this.$refs.editForm.validate(async valid=>{
        if(valid){
          if(this.editForm.hygiene === '已打扫' || this.editForm.hygiene === '10'){
            this.editForm.hygiene= 10
          }else{
            this.editForm.hygiene = 20
          }
          const {data:res}= await this.$http.post('/rCondition/updateConditionById',this.editForm)
          if(res.code!=200) return this.$message.error('修改房间信息失败！')
          this.$message.success('修改房间信息成功~')
        }
      })
      this.$emit('editClickBack')
      this.showFlag = false
    },
    //取消保存
    onCancel(){
      this.showFlag=false
    },
    //关闭对话框的回调函数
    closeDialog(){
      this.$refs.editForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>